<!--炼焦循环图-->
<template>
    <div class="d3-chart" :id="domId">
    </div>
</template>

<script>
import * as d3 from "d3";

export default {
  name: "d3-chart",
  data() {
    return {
      domId: "d3-chart-" + +new Date()
    };
  },
  watch: {
    d3ChartData: function() {
      this.renderChart();
    }
  },
  methods: {
    transformData: function(lineData) {

      return lineData.map(function(item, idx) {
        //如果有rx属性则表示画弧线（也可改为通过type字段区分画什么线）
        const type = "rx" in item ? "arcs" : "line";
        const pre = lineData[idx - 1] || item;
        const start = ["M" + pre.x, pre.y];
        let end = [];

        switch (type) {
          case "line":
            end = ["L" + item.x, item.y];
            break;
          case "arcs":
            (function f() {
              //rx  ry  x-axis-rotation  large-arc-flag  sweep-flag  x  y
              const {
                rx,
                ry = rx,
                xAxisRotation = 0,
                largeArcFlag = 0,
                sweepFlag = 1,
                x,
                y
              } = item;

              end = [
                "A" + rx,
                ry,
                xAxisRotation,
                largeArcFlag,
                sweepFlag,
                x,
                y
              ];
            })();
            break;
          default:
        }
        const _path = start.concat(end);

        _path.style = {
          color:"red"
        }
        return _path;
      });
    },
    renderChart: function() {
      const domId = "#" + this.domId;
      const { d3ChartData = {} } = this.$props;
      let { lineData = [], circleData = [] } = d3ChartData;

      //移除所有元素
      d3.selectAll(domId + " svg").remove();
      const svg = d3.select(domId).append("svg");

      if (!lineData.length) {
        return;
      }

      lineData = this.transformData(lineData);

      svg
        .selectAll("path")
        .data(lineData)
        .enter()
        .append("path")
        .attr("class", "d3-chart-path")
        .attr("d", function(d) {
          return d;
        })
        // .attr("style",function(d){
        //   //颜色，宽度控制可由后端返回
        //   return `stroke :${d[3] > 100 ?'red':"blue"};stroke-width:5px;stroke-linecap:round`;
        // });

      svg
        .selectAll("circle")
        .data(circleData)
        .enter()
        .append("circle")
        .on("click", (data, index, circles) => {
          this.$emit("circleClick", data, index, circles);
        })
        .attr("cx", function(d) {
          return d.x;
        })
        .attr("cy", function(d) {
          return d.y;
        })
        .attr("r", 3)
        .attr("class", "d3-chart-circle");
    }
  },
  props: ["d3-chart-data"],
  mounted() {
    this.$nextTick(() => {});
  }
};
</script>

<style lang="scss">
.d3-chart {
  svg {
    width: 1000px;
    height: 500px;
  }
  .d3-chart-path {
    fill: none;
    stroke: cornflowerblue;
    stroke-width: 2px;
  }

  .d3-chart-circle {
    cursor: pointer;
  }
}
</style>
